<template>
  <!---------------------------- 库存信息 ---------------------------->
  <div>
    <div class="coin-kc bg-fff" ref="coinsroll">
      <div class="box4 border-bottom clearfix">
        <div class="fl f28 lh110 color-000" id="boxcoins"><span class="f32 color-000 mr-20 brl pl-20">担保寄售交易</span></div>
        <div class="fr f28 color-888 lh110">寄售和担保卖家的所有游戏币</div>
      </div>

        <coins-sort v-on:dj="dj" v-on:sort="sort" v-on:dj2="dj2" v-on:sort2="sort2" :isHide="isHide" :isSort="isSort"></coins-sort>


      <mt-loadmore
        :bottom-all-loaded="allLoaded" ref="loadmore" id="boxs"
        v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
      >
        <div class="mstfiv" id="hidessbox" style="position: absolute;display: none" @click="mstfiv_click"></div>
        <ul class="clearfix">
          <li class="border-bottom p-30" v-for="personList in personLists" :key="personList.id" @click="mrouter(personList)">

              <div class="clearfix">
                <span class="fl f32 color-010101">{{personList.title}}</span>
                <b class="fr f32 color-f75e46">{{personList.total_amount}}元</b>
              </div>
              <div class="clearfix mt-25">
                <div class="fl f28 color-010101">
                  <span class="color-888 mr-20">单价</span>1元 = {{(personList.unit_num/personList.total_amount).toFixed(2)}}{{personList.unit_name}}
              </div>
                <div class="fr">
                  <i class="mr-20">
                    <img v-if="personList.unit_promise_time_locked>0?true:false" src="~images/Icon/chaoshi.png"/>
                    <img v-if="personList.biz_offer_flag.indexOf('保')>0?true:false" src="~images/Icon/ketbao.png"/>
                    <img v-if="personList.deposit>0?true:false" src="~images/Icon/icon-new-pei.png"/>
                    <img v-if="personList.biz_offer_flag=='~'?true:false" src="~images/Icon/icon-new-xian.png"/>
                    <img v-if="personList.biz_offer_flag.indexOf('心买')>-1?true:false" src="~images/Icon/icon-new-axm.png"/>
                    <img v-if="personList.biz_offer_flag.indexOf('安买')>-1?true:false" src="~images/Icon/maijia.png"/>

                  </i><span class="f28 va15 color-888">库存{{personList.delivery_num}}件</span>

                </div>
              </div>
            <!--</router-link>-->
          </li>
          <p id="coins_id" v-if="showCoins">
            <img src="~images/coins/loading-sm.gif">
            <span>请等待。。。</span>
          </p>
        </ul>
      </mt-loadmore>
    </div>
    <div v-show="coinsImage" id="coinsImage">
      <div class="list-empty bg-fff" style="padding-top: 1rem;margin-bottom: 1rem">
          <p>
            <img src="~images/gamelogo.png"></p>
          <span class="mb-10">竟然一件商品都没有</span>
          <i v-if="cort" class="f26  color-999">或许筛选条件太多了，去掉一些试试看</i>
        <span v-if="cort" @click="rescreen"
          class="bg-m1 px-20 py-20 color-fff f32 mt-30" style="width:30%;margin-left:35%;margin-right:35%;color:#fff;" >重新筛选
        </span>
      </div>
    </div>
  </div>

</template>

<script>
  import Vue from 'vue'
  import coinsBao from '../../assets/images/Icon/icon-bao.png'
  import coinsChe from '../../assets/images/Icon/icon-che.png'
  import coinsPei from '../../assets/images/Icon/icon-pei.png'
  import CoinsSort from "./CoinsSort.vue"
  Vue.filter('mathFilter',function(value){
        return value.split('_')[0]
  });
  export default{
    name: "CoinsPerson",
    data () {
      return {
        delivery_num:'',//库存
        cort:false,//筛选为空时选择
        allLoaded: false,
        busy: false,
        personLists: [],
        coinsImage:false,
        showCoins:false,
        scroll:0,
        pageSize:20,
        start:0,
        shaixuan:false,
        gaga:false,
        isHide:false,
        sortMap: {unit_price:"-"},
        total_amount:["0-999999"],//筛选
        sortString:undefined,
        deposit:["0"],
        is_jishou:undefined,
        isZhongkaiguan:undefined,
        isTypes:undefined,
        race:undefined,
        scParms:{},
        isSort:false,
        gcQf:'',
        qfId:''
      }
    },
    components: {
      "coins-sort": CoinsSort,
    },
    mounted(){
      document.body.scrollTop = 300;
      document.documentElement.scrollTop=300;
    },
    created(){
      if(this.$route.query.raceid){
        this.race = [this.$route.query.raceid]
      }
      /**区服开关开始 */
     this.$http.get(this.$CONSTANTS.APICategory+'category/crossServiceSearch',{
       params:{
         gameId:this.$route.query.gameId,
         goodsType:'3'
       }
     }).then((data) => {
       this.gcQf = data.body
     })
     /**区服结束 */
    },
    methods: {
      rescreen(){
        this.isSort = true
      },
      mstfiv_click(){
        document.getElementById("hidessbox").style.display = "none";
        this.isHide = true
      },
      menus(){
         document.body.scrollTop = 300;
      },
      dj2(str){
        if(str=='最新发布'){
          this.sortMap = {
            insert_time:'-'
          };
          this.personLists=[];
          this.start=0;
        }else if(str=='单价最低'){
          this.sortMap = {
            unit_price:'-'
          };
          this.personLists=[];
          this.start=0
        }else if(str=='总价最低'){
          this.sortMap = {
            total_amount:'+'
          };
          this.personLists=[];
          this.start=0
        }else if(str=='总价最高'){
          this.sortMap = {
            total_amount:'-'
          };
          this.personLists=[];
          this.start=0
        }

      },
      sort2(str){

        this.shaixuan= true;
        const attr = [];
        const object = {};
        const object_totle = {};
        const self = this
        if(str.baozhang!=undefined){
          str.baozhang.forEach(function (str) {
            if(str == "无货赔付"){
              self.deposit = ["1-999999"]
            }else if(str == "本商品可投保"){
              str = "保"
              attr.push(str)
            }else if(str == "本商品已投保"){
              str = "~"
              attr.push(str)
            }else if(str == "安心买"){
              str = "买"
              attr.push(str)
            }
          });
          if(attr.length!=0){
            this.sortString = attr
          }
        }else{
          this.sortString = undefined
        }
        var objects = {};
        if(str.jiaoyi!=undefined){
          if(str.jiaoyi[0]=="担保交易"){
            this.is_jishou=["1"]
          }else if(str.jiaoyi[0]=="寄售交易"){
            this.is_jishou=["2"]
          }

        }else{
          this.is_jishou= undefined
        }

        if(str.baozhang1!=undefined){
          if(str.baozhang1[0] == "无货赔付"){
            this.deposit = ["1-999999"]
          }
        }else{
          this.deposit = ["0"]
        }



//        关键字删选

        if(str.coins_min == undefined){
          str.coins_min = 0
        }
        if(str.coins_max == undefined){
          str.coins_max = 999999
        }
        this.total_amount = [str.coins_min+'-'+str.coins_max];
        this.personLists=[];
        this.start=0

      },
      dj(str){
        if(str=='最新发布'){
          this.sortMap = {
            insert_time:'-'
          };
          this.personLists=[];
          this.start=0;
          this.loadMore()
        }else if(str=='单价最低'){
          this.sortMap = {
            unit_price:'-'
          };
          this.personLists=[];
          this.start=0,
          this.loadMore()
        }else if(str=='总价最低'){
          this.sortMap = {
            total_amount:'+'
          };
          this.personLists=[];
          this.start=0,
          this.loadMore()
        }else if(str=='总价最高'){
          this.sortMap = {
            total_amount:'-'
          };
          this.personLists=[];
          this.start=0,
          this.loadMore()
        }

      },
//      筛选
      sort(str){

        this.shaixuan= true;
        const attr = [];
        const object = {};
        const object_totle = {};
        const self = this
        if(str.baozhang!=undefined){
          str.baozhang.forEach(function (str) {
            if(str == "无货赔付"){
                self.deposit = ["1-999999"]
            }else if(str == "本商品可投保"){
                str = "保"
              attr.push(str)
            }else if(str == "本商品已投保"){
              str = "~"
              attr.push(str)
            }else if(str == "安心买"){
              str = "买"
              attr.push(str)
            }
          });
          if(attr.length!=0){
            this.sortString = attr
          }

        }else{
          this.sortString = undefined
        }
        var objects = {};
        if(str.jiaoyi!=undefined){
          if(str.jiaoyi[0]=="担保交易"){
            this.is_jishou=["1"]
          }else if(str.jiaoyi[0]=="寄售交易"){
            this.is_jishou=["2"]
          }

        }else{
          this.is_jishou= undefined
        }

        if(str.baozhang1!=undefined){
          if(str.baozhang1[0] == "无货赔付"){
            this.deposit = ["1-999999"]
          }
        }else{
          this.deposit = ["0"]
        }



//        关键字删选

        if(str.coins_min == undefined){
          str.coins_min = 0
        }
        if(str.coins_max == undefined){
          str.coins_max = 999999
        }
        this.total_amount = [str.coins_min+'-'+str.coins_max];
        this.personLists=[];
        this.start=0,
        this.loadMore()
      },
      loadBottom(id) {
      },
      mrouter(personList){
          if(personList.goods_source_type==0){
            location.href = '/order/order-coins-check.html'+
              '?unitNum=' + (personList.total_amount || '')  +
              '&rowCat=' + 2  +
              '&goodsId=' + (personList.id || '')  +
              '&buyerType=' + 2  +
              '&gameId=' + (personList.game_id || '') +
              '&regionId=' + (personList.region_id || '')  +
              '&serverId=' + (personList.server_id || '')  +
              '&raceId=' + (personList.race_id || '')  +
              '&gname=' + (personList.game_name || '')  +
              '&areaname=' + (personList.region_name || '')  +
              '&servername=' + (personList.server_name || '')  +
              '&racename=' + (personList.race_name || '') +
              '&serviceProviderName=' + (personList.service_provider_name || '')+
              '&serviceProviderId=' + (personList.service_provider_id || '')
          }else{
            this.$router.push(
              {name:'CoinsSales',query:{
                'gname': this.$route.query.gname,
                'racename':this.$route.query.racename,
                'raceId': this.$route.query.raceid,
                'areaname':this.$route.query.areaname,
                'servername':this.$route.query.servername,
                'goodsType':3,
                'gid' : this.$route.query.gid,
                'areaid' : this.$route.query.areaid,
                'serverid' : this.$route.query.serverid,
                'title':personList.title,
                'blancenum':personList.delivery_num,
                'unit_num':personList.total_amount,
                'unit_addition':personList.unit_addition,
                'id':personList.id,
                'isJis':personList.trading_service_type,
                'Price':personList.unit_price,
                'locked':personList.unit_promise_time_locked>0?true:false,
                'flag':personList.biz_offer_flag.indexOf('保')>0?true:false,
                'anxinmai':personList.biz_offer_flag.indexOf('心买')>-1?true:false,
                'maianxinmai':personList.biz_offer_flag.indexOf('安买')>-1?true:false,
                'c_deposit':personList.deposit>0?true:false,
                'yitoubao':personList.biz_offer_flag=='~',
              }}
            )
          }
      },
      gagaMethod(status,qfId){
          var accurateMap={};
          if(status!=1){
            accurateMap.goods_source_type = ["0"];
          };
          /* 高晨区服互通开始*/
          if (this.gcQf && qfId!=null){
            accurateMap.gtr_twenty_five = [qfId];
          } else{
            accurateMap.region_id = [this.$route.query.areaid];
            accurateMap.server_id = [this.$route.query.serverid];
          }
          /* 结束*/
           accurateMap.game_id = [this.$route.query.gid];
          accurateMap.goods_type = ["3"];
          
          if(this.$route.query.raceid+""!="null"&&this.$route.query.raceid+""!="undefined"){
            accurateMap.race_id = [this.$route.query.raceid,""];
          }
          accurateMap.trading_service_type = this.is_jishou;
          accurateMap.publish_type = ["0","1"];
          accurateMap.seller_status = ['0'];
          this.$http.post(
            this.$CONSTANTS.APISearch+'goodsSearch/goodsSearchList',{
              sortMap:this.sortMap,

                keyWordList: [
                  {biz_offer_flag:this.sortString}
                ],
                betweenMap:{
                  total_amount:this.total_amount,
                  deposit:this.deposit,
                },
                accurateMap:accurateMap,
                fetchField:[],
                page:this.start,
                pageCount:this.pageSize,
            },
            {
              headers: {
                contentType: "aplication/json; charset = UTF-8",
                dataType: 'json'
              }
            }
          ).then((res) => {
            this.showCoins = false;//后期去掉
            var self = this;
            if(res.body.responseStatus.code=="00"){
              const object =  JSON.parse(res.body.result).items;
              if(this.start == 1 && object.length == 0){
                this.coinsImage = true;
                if(this.shaixuan==true){
                  this.cort = true
                }
              }else{
                this.coinsImage = false
              }
              object.forEach(
                (item,index) => {
                  self.personLists.push(item);
                  self.showCoins = false;
                })
              if(object.length==20){
                self.busy = false
              }else{
                self.showCoins = false;
              }

            }
            else{
              this.coinsImage = true
            }
          }, () => {
            console.log("请求错误！");
          });
      },
      loadMore: function () {
        var self = this;
        self.busy = true;
        this.showCoins = true;
        this.start=this.start+1;
        if(this.gaga===1||this.gaga===0) {
          console.log('money')
          this.gagaMethod(this.gaga,this.qfId);
          return false;
        }
        //开关
        this.$http.post(
          this.$CONSTANTS.APISearchCenter+'OnoffService/selectOnoff',
          {mapRequest: {type: "游戏币商品总开关"}},
          {
            headers: {
              contentType: "aplication/json; charset = UTF-8",
              dataType: 'json'
            }
          }
        ).then((res)=>{

          const abc = res.body.result.status;

          if(abc!=1){
            this.coinsImage = true;
            this.showCoins = false;
            return false;
          }
          this.$http.post(
            this.$CONSTANTS.APISearchCenter+'OnoffService/selectOnoff',
            {mapRequest: {type: "主站游戏币商品开关"}},
            {
              headers: {
                contentType: "aplication/json; charset = UTF-8",
                dataType: 'json'
              }
            }
          ).then((res)=>{
            this.gaga = res.body.result.status;

            /*2018-01-31*/
            this.getIdByGameFourProperty()

           
          }, () => {
            console.log("请求错误！");
          });

        }, () => {
          console.log("请求错误！");
        });
      },

      /*区服互通*/
      getIdByGameFourProperty(){
        let self = this
        self.$http.get(self.$CONSTANTS.APICategory+'category/getIdByGameFourProperty',
        {params:{
          gameId:self.$route.query.gameId,
          regionId:self.$route.query.areaId,
          serverId:self.$route.query.serverId
        }}).then((data)=>{
          this.qfId = data.body.regionalSuitMergerEO.id
          this.gagaMethod(self.gaga,data.body.regionalSuitMergerEO.id)
        })
      }
    },


  }
</script>
